<template>
  <div style="width: 100%; margin: 0 auto">
    <span
      style="display: block; width: 100%; margin: 10px auto;"
    >
      <i style="color: #E6A23C" class="el-icon-warning" />
      说明：优选以环境别名搜索，若搜不到数据，再以host搜索，最后再以项目名称或者活动名称搜索
    </span>
    <el-input
      v-model="queryStr"
      clearable
      size="small"
      placeholder="可以根据项目名称、活动名称、环境别名或host进行搜索"
      class="input-with-select"
    >
      <el-button slot="append" icon="el-icon-search" @click="searchPreEvns" />
    </el-input>
    <div style="display: block; width: 100%; margin: 24px auto" />
    <el-table
      :data="preEnvList"
      border
      max-height="500px"
      header-cell-class-name="header-class"
      cell-class-name="cell-class"
      style="width: 100%"
    >
      <el-table-column
        v-for="header in tableHeaders"
        :key="header.prop"
        :prop="header.prop"
        :label="header.label"
        :width="header.width"
        :fixed="header.fixed"
      >
        <template slot-scope="scope">
          <el-button
            v-if="header.prop === 'operation'"
            type="primary"
            size="mini"
            @click="userPrEnv(scope.row)"
          >使用</el-button>
          <div v-else-if="header.isEnv">
            <span>
              {{ !scope.row[header.prop] ? '' : scope.row[header.prop].host + ':' + scope.row[header.prop].port }}
            </span>
            <el-tooltip
              v-if="scope.row[header.prop]"
              class="item"
              effect="dark"
              :content="!scope.row[header.prop] ? '' : scope.row[header.prop].username + '/' + scope.row[header.prop].password"
              placement="top-start"
            >
              <el-button size="mini" type="text" icon="el-icon-user-solid" />
            </el-tooltip>
          </div>
          <span v-else>{{ scope.row[header.prop] }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import { getPreEnvList } from '@/api/tools'

export default {
  name: 'EnvAliasList',
  emits: [
    /**
     * 确认使用预置环境信息
     */
    'use-preset-env'
  ],
  props: {
    // 预置环境信息
    preEnvList: {
      type: Array,
      required: true
    },
    // 环境来源，默认不区分
    envFromType: {
      type: Number,
      default: 0
    },
    // 环境被打开时的divId
    openDvId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      queryStr: '',

      tableHeaders: [{
        prop: 'projectName',
        label: '项目名称'
      }, {
        prop: 'activityName',
        label: '活动名称'
      }, {
        prop: 'envAlias',
        label: '环境别名'
      }, {
        prop: 'normal',
        label: '常规环境',
        isEnv: true
      }, {
        prop: 'appDb',
        label: '应用数据库',
        isEnv: true
      }, {
        prop: 'osDb',
        label: '云Os数据库',
        isEnv: true
      }, {
        prop: 'ssh',
        label: 'Ssh隧道环境',
        isEnv: true
      }, {
        prop: 'operation',
        label: '操作',
        width: '80px',
        fixed: 'right'
      }],
      userInfoVisible: false
    }
  },
  methods: {
    // 使用环境
    userPrEnv(row) {
      this.$emit('use-preset-env', row, this.openDvId)
    },

    // 查询环境信息
    async searchPreEvns() {
      const preEnvResp = await getPreEnvList({
        queryStr: this.queryStr,
        envFromType: this.envFromType
      })
      this.preEnvList = preEnvResp.data
    }
  }
}
</script>
<style scoped>
::v-deep .header-class {
  text-align: center;
}
.cell-class {
  text-align: center;
  font-size: 14px;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

</style>
